<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>onmouseenter/onmouseleave与onmouseover/onmouseout的区别</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 300px;
      height: 300px;
      background-color: red;
    }
    #box #box1{
      width: 200px;
      height: 200px;
      background-color: green;
    }
    
  </style>
</head>
<body>
  <div id="box">
    <div id="box1"></div>
  </div>
<script>
  //只要是委派就用 onmouseover与onmouseout 因为它会有个切换元素的过程
  //从子元素移到父元素身上.会触发子元素的onmouseout和父元素的onmouseover事件
  
  //而onmouseenter与onmouseleave父子元素之间移入移出 事件元素没有切换
  
  var box = document.getElementById("box");
  box.onmouseenter = function (){
    console.log("移入box");
  }
  
  box.onmouseleave = function () {
    console.log("移出box");
    
  }
  

</script>
</body>
</html>